<template>
  <div class="showv">
    <!-- 返回箭头 -->
    <div class="back" @click="$router.go(-1)"><div class="img"><img src="../assets/imgs/返回箭头.png" alt=""></div></div>
    <!-- 轮播图 -->
    <van-swipe class="bigimg">
      <van-swipe-item
        ><img :src="lists.sptimgs" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img :src="lists.sptimgs" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img :src="lists.sptimgs" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img :src="lists.sptimgs" alt=""
      /></van-swipe-item>
      <div class="uo">up</div>
    </van-swipe>
    <!-- 价格 -->
    <div class="price">
      <div class="le">卷后￥<span>{{lists.qianq}}</span> <span>卷前￥{{lists.beticket}}&gt;</span></div>
      <div class="ri"><span>{{lists.hou}}</span></div>
    </div>
    <!-- 优惠卷 -->
    <div class="some">
      <div class="le">
        <div class="no1">3元无门槛优惠券</div>
        <div class="no1">满10减1</div>
        <div class="no1">2件9折</div>
      </div>
      <div class="ri" @click="ticket">
        <div class="imgs">
          <img src="../assets/imgs/向右箭头.png" alt="" />
        </div>
      </div>
    </div>
    <div class="green">先用后付|支持0元下单|确认收货后再付款</div>
    <div class="name">
      {{lists.titles}}
    </div>
    <div class="some sss">
      <div class="le">
        <span>
          <img src="../assets/imgs/多人.png" alt="" />
        </span>
        我拼过的店
      </div>
      <div class="ri">
        <div class="imgs">
          <img src="../assets/imgs/向右箭头.png" alt="" />
        </div>
      </div>
    </div>
    <div class="some sss">
      <div class="le">
        <span>
          <img src="../assets/imgs/电视.png" alt="" />
        </span>
        我拼过的店
      </div>
      <div class="ri">
        <div class="imgs">
          <img src="../assets/imgs/向右箭头.png" alt="" />
        </div>
      </div>
    </div>
    <div class="some sss">
      <div class="le">
        <p>12小时发货，7天包退，全场包邮，先用后付</p>
      </div>
      <div class="ri">
        <div class="imgs">
          <img src="../assets/imgs/向右箭头.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="pl">
        <div class="thissay">
            <div class="left"><p>该商品所有评论</p></div>
            <div class="right"><router-link tag="p" to="/pinglun">查看全部<span><img src="../assets/imgs/向右箭头.png" alt=""></span></router-link></div>
        </div>
        <div class="down">
            <div class="item">质量很好（2007）</div>
            <div class="item">好看（1230）</div>
            <div class="item">版型好（1550）</div>
            <div class="item">尺码准（4230）</div>
            <div class="item">摸舒服（1230）</div>
        </div>
    </div>
    <!-- 店铺 -->
    <div class="dianpu">
      <div class="toux">
        <img src="../assets/imgs/头像.jpg" alt="">
      </div>
      <div class="many">
        <div class="shang">一家店铺</div>
        <div class="xia">已拼9999件</div>
      </div>
      <div class="inside">
        进店逛逛
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="moreimgs">
        <div class="header">
            <p>商品详情</p>
            <div class="imgs"><img src="../assets/imgs/问号.png" alt=""></div>
        </div>
        <div class="hec">
          <div class="no1">
            <p>发货地</p><p class="ri">浙江</p>
          </div>
          <div class="no2">
            <p>类型</p><p class="ri">长袖</p>
          </div>
          <div class="no3">
            <p>适用人群</p><p class="ri">青少年</p>
          </div>
          <div class="no4">
            <p>材质</p><p class="ri">涤纶</p>
          </div>
          <div class="no5">
            <p>品牌</p><p class="ri">AJ</p>
          </div>
        </div>
        <div class="imgimg">
            <div class="item">
                <img :src="lists.sptimgs" alt="">
            </div>
            <div class="item">
                <img :src="lists.sptimgs" alt="">
            </div>
            <div class="item">
                <img :src="lists.sptimgs" alt="">
            </div>
            <div class="item">
                <img :src="lists.sptimgs" alt="">
            </div>
            <div class="item">
                <img :src="lists.sptimgs" alt="">
            </div>
        </div>
    </div>
    <!-- 空白 -->
    <div class="kongbai"></div>
    <!-- 底部 -->
    <div class="under">
      <div class="items one">
        <div class="iiis">
          <div class="imgs"><img src="../assets/imgs/商铺.png" alt="" /></div>
          <div class="wenzi">商铺</div>
        </div>
        <div class="iiis">
          <router-link tag="div" :to="'/likes?id='+id" class="imgs"><img src="../assets/imgs/爱心.png" alt="" /></router-link>
          <div class="wenzi">收藏</div>
        </div>
        <div class="iiis">
          <div class="imgs"><img src="../assets/imgs/对话.png" alt="" /></div>
          <div class="wenzi">客服</div>
        </div>
      </div>
      <div class="items two" @click="want">
        <P class="mony">${{lists.beticket}}</P>
        <P class="by">单独购买</P>
      </div>
      <div class="items three" @click="want">
        <P class="mony">卷后${{lists.qianq}}</P>
        <P class="by">发起拼单</P>
      </div>

      <!-- 购买版块 -->
      <transition>
      <div class="buy" v-show="showit">
        <div class="header">
            确认订单
        </div>
        <div class="address">
            <div class="imgs">
                <img src="../assets/imgs/定向.png" alt="">
            </div>
            <div class="wenzi">
                林某某，13126000514，广东省某某市某某区某某大道999号
            </div>
            <div class="arrow">
                <div class="imgs">
                    <img src="../assets/imgs/向右箭头.png" alt="">
                </div>
            </div>
        </div>
        <div class="money">
            <div class="price"><p>￥{{sum}}<span>大促价{{lists.chip}}</span> </p></div>
            <div class="want">
                <div class="item left" @click="cut">-</div>
                <div class="item middle">{{nums}}</div>
                <div class="item right" @click="add">+</div>
            </div>

        </div>
        <div class="showsize" >
            <div class="item" v-for="(item,index) in lists.sizelist[0].smallimgs" :key="index">
                <img :src="item.img" alt="">
                <span>{{item.smalltitle}}</span>
            </div>
        </div>
        <router-link tag="div" :to="'/givemoney?id='+id" class="sure">
            确认订单
        </router-link>
      </div>
      </transition>
    </div>
    <!-- .优惠卷弹窗 -->
    <div class="tcbox" v-show="showticket">
        <div class="header">
            <p>优惠详情</p>
            <div class="imgs" @click="closetck">
                <img src="../assets/imgs/关闭.png" alt="">
            </div>
        </div>
        <div class="tcbody">
            <div class="bozi">
                店铺优惠
            </div>
            <div class="item">
                <div class="manj">
                    ￥1
                    <div class="imgs">
                        <img src="../assets/imgs/满减.png" alt="">
                    </div>
                </div>
                <div class="middle">
                    <p>全店满28减1</p>
                    <p class="small">全部商品可以用</p>
                </div>
                <div class="gotosee">
                    <div class="redbox">
                        去看看
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="manj">
                    ￥1
                    <div class="imgs">
                        <img src="../assets/imgs/满减.png" alt="">
                    </div>
                </div>
                <div class="middle">
                    <p>全店满28减1</p>
                    <p class="small">全部商品可以用</p>
                </div>
                <div class="gotosee">
                    <div class="redbox">
                        去看看
                    </div>
                </div>
            </div>
        </div>

    </div>
    
  </div>
</template>

<script>
export default {
    props:["homelists"],
    data(){
        return{
            showit:false,
            nums:0,
            showticket:false,
            lists:null,
            sum:0,
            id:"",
            
        }
    },
    methods:{
        // 打开购买窗口
        want(){
            this.showit=!this.showit
        },
        // 优惠卷窗口
        ticket(){
            this.showticket=!this.showticket
        },
        // 关闭优惠卷窗口
        closetck(){
            this.showticket=!this.showticket
        },
        // 数量添加
        add(){

          this.nums+=1;
          this.sum =Number(this.lists.qianq)*this.nums
          // this.lists.qianq=this.sum,
            console.log(this.sum)
            this.lists.overprice=this.sum
            window.localStorage.setItem("price",this.sum)
        },
        // 数量减少
        cut(){
            if(this.nums<=1){
                this.nums=1;
            }else{
                this.nums--,
                this.sum =Number(this.lists.qianq)*this.nums
                this.lists.overprice=this.sum
                window.localStorage.setItem("price",this.sum)
            }
        },
        // 选择
        chose(){
            
        },
        // 接收id
        getDataFun(id){
            let index = this.homelists.findIndex(item=>item.id==id);
            this.lists=this.homelists[index];
            console.log(this.lists)
            this.sum=this.lists.qianq
            this.id=this.lists.id
        },
        
        
    },
    computed:{
      
    },
    created(){
        console.log(this.$route.query.id);
        this.getDataFun(this.$route.query.id)
    }
};
</script>

<style lang="scss">
.showv .dianpu{
  width: 100%;
  display: flex;
  padding: 10px 10px;
  border-top: 10px solid #dfdfdf;
  border-bottom: 10px solid #dfdfdf;
  align-items: center;
  .toux{
    width: 45px;
    height: 45px;
    img{
      width: 100%;
    }
  }
  .many{
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    .shang{
      font-size: 14px;
      font-weight: 700;
    }
    .xia{
      font-size: 12px;
      color: #747474;
      margin-top: 10px;
    }
  }
  .inside{
    width: 70px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    margin-left: 160px;
    border-radius: 6px;
    border: 1px solid #777;
  }
}
.showv .tcbox{
    border-top: 1px solid #999;
    position: fixed;
    bottom: 50px;
    background-color: #fff;
    width: 100%;
    height: 300px;
    padding: 0 12px;
    .header{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
        font-weight: 500;
        border-bottom: 6px solid #dfdfdf;
        position: relative;
        .imgs{
            position: absolute;
            top: 20px;
            width: 12px;
            height: 12px;
            right: 25px;
            img{
                width: 100%;
            }
        }
    }
    
    .tcbody{
        width: 100%;
        .bozi{
            width: 100%;
            height: 20px;
            line-height: 20px;
            margin-left: 12px;
            font-size: 14px;
            border-bottom: 1px solid #dfdfdf;
        }
        .item{
            width: 84%;
            margin: 10px auto 10px;
            height: 90px;
            border: 1px solid #dfdfdf;
            border-radius: 5px;
            display: flex;
            .manj{
                width: 90px;
                height: 90px;
                font-size: 30px;
                color: red;
                font-weight: 600;
                text-align: center;
                line-height: 90px;
                position: relative;
                .imgs{
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 70px;
                img{
                    width: 100%;
                }
                }
                
            }
            .middle{
                flex: 1;
                height: 90px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .small{
                    font-size: 12px;
                    color: #999;
                }
            }
            .gotosee{
                width: 70px;
                height: 90px;
                .redbox{
                    width: 60px;
                    height: 24px;
                    font-size: 16px;
                    color:#fff;
                    background-color: #dd3e32;
                    border-radius: 5px;
                    margin-left: 5px;
                    margin-top: 32px;
                    text-align: center;
                    line-height: 24px;
                    font-size: 12px;
                }
            }
        }
    }

}
.showv .under{
    position: relative;
    .buy{
        width: 98%;
        background-color: #fff;
        position: fixed;
        bottom: 42px;
        display: block;
        padding: 0 12px;
        .sure{
            width: 100%;
            height: 40px;
            background-color: red;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
        }
        .money{
            width: 98%;
            margin-top: 5px;
            display: flex;
            align-items: center;
            .price{
                p{
                    color: red;
                    font-size: 16px;
                    span{
                        color: gray;
                        font-size: 12px;
                    }
                }
            }
            .want{
                width: 104px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                .item{
                    display: inline-block;
                }
                .left{
                    width: 20px;
                    height: 20px;
                    background-color: #dfdfdf;
                }
                .middle{
                    width: 40px;
                    height: 20px;
                }
                .right{
                    width: 20px;
                    height: 20px;
                    background-color: #dfdfdf;
                }
            }
        }
        .header{
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            
        }
        .address{
            display: flex;
            align-items: center;
            height: 50px;
            width: 98%;
            text-align: left;
            .imgs{
                width: 40px;
                height: 40px;
                margin-top: 10px;
                img{
                    width: 100%;
                }
            }
            .wenzi{
                margin-left: 10px;
            }
            .arrow{
                .imgs{
                    width: 20px;
                    height: 20px;
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .showsize{
            width: 98%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            .item{
                width: 80px;
                height: 80px;
                margin-top: 20px;
                margin-bottom: 20px;
                img{
                    width: 100%;
                }
                span{
                    display: inline-block;
                    width: 100%;
                    text-align: center;
                    font-size: 12px;
                }
            }
        }
    }
}

.showv .moreimgs{
    width: 100%;
    margin-top: 10px;
    .header{
        width: 95%;
        height: 20px;
        padding: 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            display: inline-block;
        }
        .imgs{
            width: 12px;
            height: 12px;
            margin-right: 12px;
            img{
                width: 100%;
            }
        }
    }
    .hec{
      width: 96%;
      margin-top: 12px;
      margin-bottom: 12px;
      margin-left: 8px;
      background-color: #dfdfdf;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
        .no1{
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          p{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            &.ri{
              color:#777;
            }
          }
        }
        .no2{
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          p{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            &.ri{
              color:#777;
            }
          }
        }
        .no3{
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          p{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            &.ri{
              color:#777;
            }
          }
        }
        .no4{
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          p{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            &.ri{
              color:#777;
            }
          }
        }
        .no5{
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          p{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            &.ri{
              color:#777;
            }
          }
        }
    }
    .imgimg{
        width: 100%;
        img{
            width: 100%;
        }
    }

}
.show{
    // position: relative;
}
.showv .pl {
  width: 95%;
  margin: 10px auto 0;
  background-color: #f5f5f5;
  .thissay{
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .left{
        display: inline-block;
        font-size: 16px;
    }
    .right{
        display: inline-block;
        font-size: 14px;
        color: #999;
        span{
            display: inline-block;
            width: 10px;
            height: 10px;
            img{
                width: 100%;
            }
        }
    }
  }
  .down{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
        padding: 2px;
        height: 18px;
        background-color: #fff;
        margin: 2px 4px;
        font-size: 14px;
        line-height: 18px;
        background-color: #efaba8;
        border-radius: 3px;
        text-align: center;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.showv .bigimg {
  width: 100%;
  height: 376px;
  position: relative;
}
.showv .bigimg img {
  width: 100%;
}
.back {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0;
    z-index: 999;
    // border-radius: 50%;
    background-color: rgba(0,0,0,0.1);
   .img{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
         img{
        width: 25px;
        height: 25px;
        margin-left: 15px;
    }
   }
}
.uo {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 25px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  z-index: 99;
}
.showv .under {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  display: flex;
}
.showv .under .items {
  flex: 1;
  height: 50px;
}
.showv .under .one {
  display: flex;
  align-items: center;
  background-color: #fff;
}
.showv .under .one .iiis {
  flex: 1;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.showv .under .one .iiis .imgs {
  width: 20px;
}
.showv .under .one .iiis .imgs img {
  width: 100%;
}
.showv .under .two {
  background-color: #efaba8;
  color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 15px;
}
.showv .under .three {
  background-color: #de3d30;
  color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 15px;
}
.mony {
  width: 100%;
  height: 15px;
  font-size: 14px;
  margin-top: 10px;
}
.by {
  width: 100%;
  height: 15px;
}
.price {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;

  margin-top: 8px;
}
.price .le {
  color: red;
  font-size: 12px;
  text-indent: 10px;
}
.price span:nth-child(1) {
  font-size: 22px;
}
.price span:nth-child(2) {
  font-size: 12px;
  color: #111;
  margin-left: 5px;
}
.price .ri {
  height: 30px;
  display: flex;
  align-items: flex-end;
}
.price .ri span {
  font-size: 12px;
  color: #111;
  margin-right: 10px;
}
.some {
  display: flex;
  height: 20px;
  margin-top: 10px;
}
.some .le {
  flex: 1;
  height: 20px;
  display: flex;
  margin-left: 10px;
}
.some .ri {
  width: 19px;
  height: 19px;
}
.some .ri .imgs {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  margin-top: 5px;
}
.some .ri .imgs img {
  width: 100%;
}
.some .le > div {
  height: 20px;
  border: 1px solid red;
  font-size: 12px;
  margin-right: 5px;
  border-radius: 4px;
  color: #de3d30;
  text-align: center;
  line-height: 20px;
}
.green {
  width: 95%;
  background-color: #ecf8ec;
  margin: 10px auto 0;
  height: 24px;
  font-size: 12px;
  color: #51a73e;
  text-indent: 5px;
  line-height: 24px;
}
.name {
  width: 95%;
  font-size: 14px;
  margin: 10px auto 0;
  line-height: 18px;
  font-weight: 600;
}
.sss {
  margin-top: 10px;
}
.sss .le > span {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.sss .le > span img {
  width: 100%;
}
.sss .le > p {
  font-size: 12px;
}

.kongbai {
  width: 1px;
  height: 60px;
}

.v-enter {
        transform: translateY(-150px);
        opacity: 0;
}
.v-leave-to {
    transform: translateY(150px);
    opacity: 0;
}
.v-enter-active,
.v-leave-active {
    transition: all 0.5s ease-in-out;
}
</style>